<template>
  <view>
    <!-- 轮播图区域 -->
    <swiper indicator-dots autoplay interval="2000" circular>
      <block v-for="(item, index) in goodsInfo.pics" :key="index">
        <swiper-item>
          <image :src="item.pics_big" @click="imagePreview(item.pics_big)" />
        </swiper-item>
      </block>
    </swiper>

    <view class="goods_info">
      <!-- 商品名称、价格和运费 -->
      <view class="box1">
        <view class="price" v-html="'￥' + goodsInfo.goods_price"></view>
        <view class="goods_name">
          <view class="left">{{ goodsInfo.goods_name }}</view>
          <view class="right">
            <van-icon name="star-o" />
            <view>收藏</view>
          </view>
        </view>
        <view class="yunfei">快递：免运费</view>
      </view>
      <view class="sep_line"></view>

      <view class="box2">
        <!-- 促销 -->
        <view>
          <text>促销</text>
          <text>满300元减30元</text>
        </view>

        <!-- 已选 -->
        <view>
          <text>已选</text>
          <text>黑色/S/1件</text>
        </view>
      </view>
      <view class="sep_line"></view>

      <!-- 收货地址区域 -->
      <view class="box3" @click="getAddress">
        <view>
          <text>送至</text>
          <text>{{ isShowAddress }}</text>
        </view>
        <van-icon name="arrow" />
      </view>
      <view class="sep_line"></view>
    </view>

    <!-- tab 区域 -->
    <van-tabs class="tab2" :active="active" @change="onChange">
      <van-tab title="图文详情">
        <!-- rich-text 用来解析后台返回的 html 代码 -->
        <rich-text :nodes="goodsInfo.goods_introduce"></rich-text>
      </van-tab>
      <van-tab title="规格参数">
        <block v-for="(item, index) in goodsInfo.attrs" :key="index">
          <van-row>
            <van-col span="10">{{ item.attr_name }}</van-col>
            <van-col span="14">{{ item.attr_vals }}</van-col>
          </van-row>
        </block>
      </van-tab>
    </van-tabs>

    <!-- 商品导航组件 -->
    <van-goods-action class="shopNavitor">
      <van-goods-action-icon icon="chat-o" open-type="contact" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" :info="total" @click="toCartPath" />
      <van-goods-action-button color="#be99ff" @click="toCart" text="加入购物车" type="warning" />
      <van-goods-action-button color="#7232dd" text="立即购买" />
    </van-goods-action>
  </view>
</template>

<script>
import { addGoodsToCart } from '../../common/cart.js'

export default {
  data() {
    return {
      goodsId: '', // 当前商品的 id
      goodsInfo: {}, // 商品详情数据
      active: 0, // 选中的 tabs
      addressInfo: null // 收货地址
    }
  },
  onLoad(options) {
    this.goodsId = options.goods_id
    // 调用获取商品详情数据的方法
    this.getGoodsInfo()
  },
  methods: {
    // 加入购物车
    toCart () {
      // 不在这个方法中进行任何加入购物车的处理
      // 把购物车有关的逻辑方法全局抽取到 cart.js
      addGoodsToCart(this.goodsInfo)
    },

    // 进入购物车
    toCartPath () {
      uni.switchTab({
        url: '/pages/cart/cart'
      })
    },

    // 获取商品详情
    async getGoodsInfo() {
      const res = await this.request({
        url: '/goods/detail',
        data: {
          goods_id: this.goodsId
        }
      })

      if (res.meta.status !== 200) {
        return uni.showToast({
          title: '获取数据失败',
          duration: 2000,
          icon: 'none'
        })
      }

      this.goodsInfo = res.message
    },

    onChange(e) {
      console.log(e)
    },

    // 预览图片的方法
    imagePreview(current) {
      uni.previewImage({
        current: current, // 当前预览的图片
        // 预览的图片数组
        urls: this.goodsInfo.pics.map((item) => item.pics_big)
      })
    },

    // 获取收货地址
    async getAddress() {
      const [err, res] = await uni.chooseAddress()

      // 判断返回的结果，如果 err 为 true ，说明有错误
      if (err) {
        return
      }

      // 判断 API 返回的结果是否是 Ok
      if (res.errMsg !== 'chooseAddress:ok') {
        return
      }

      this.addressInfo = res
      uni.setStorageSync('address', this.addressInfo)
    }
  },
  computed: {
    isShowAddress() {
      if (this.addressInfo === null) {
        return '请选择收货地址'
      }

      const {
        provinceName: pro,
        cityName: city,
        countyName: count,
        detailInfo: detail
      } = this.addressInfo

      return pro + city + count + detail
    },
    total () {
      return getApp().globalData.total
    }
  }
}
</script>

<style lang="less">
swiper {
  height: 700rpx;

  image {
    width: 750rpx;
    height: 100%;
  }
}
.goods_info {
  .sep_line {
    border-bottom: 15rpx solid #efefef;
  }

  .box1 {
    padding: 0 10rpx;

    .price {
      font-size: 40rpx;
      color: red;
      margin: 20px 0;
    }

    .goods_name {
      display: flex;
      justify-content: space-between;

      .left {
        font-size: 26rpx;
      }

      .right {
        width: 200rpx;
        text-align: center;
        border-left: 1px solid #eee;

        > view {
          font-size: 20rpx;
        }
      }
    }

    .yunfei {
      font-size: 26rpx;
      color: #666;
      font-weight: bold;
      line-height: 80rpx;
    }
  }

  .box2 {
    font-size: 24rpx;
    padding: 0 10rpx;

    > view {
      line-height: 80rpx;

      text:nth-child(1) {
        margin-right: 20rpx;
      }

      text:nth-child(2) {
        color: #666;
      }
    }
  }

  .box3 {
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    padding: 25rpx 10rpx 25rpx 10rpx;

    > view {
      text:nth-child(1) {
        margin-right: 20rpx;
      }

      text:nth-child(2) {
        color: #666;
      }
    }
  }
}
.tab2 {
  font-size: 24rpx;

  .van-row {
    border-top: 1rpx solid #eee;

    .van-col {
      padding: 25rpx 0 25rpx 0rpx;
      // 强制换行
      word-wrap: break-word;
      word-break: normal;

      &:nth-child(1) {
        border-right: 1rpx solid #eee;
      }
    }
  }
}

.shopNavitor, .van-goods-action {
  z-index: 99 !important;
}
</style>
